<!--  -->
<template>
    <div>日计划
        {{ tableData }}

        <el-table :data="tableData" style="width: 100%">
            <el-table-column label="" width="180">
                <template #default="scope">
                    {{ `${scope.row.time < 13 ? '上午' : '下午'}${scope.row.time}时` }} </template>
            </el-table-column>
            <el-table-column label="">
                <template #default="scope">

                <TaskColumn :taskList="scope.row.task"></TaskColumn>

                    <!-- <div class="task">
                        <template v-if="scope.row.task.length > 0">
                            <div v-for="item in scope.row.task" class="task-item" :style="{top:item.top,height: item.height }"
                                :key="item.id">
                                {{ item.serviceName }}
                                {{ item.startTime }} -
                                {{ item.endTime }}
                            </div>
                        </template>

                         <div class="add-task">
                            <el-button type="danger" link>+ 添加任务</el-button>
                         </div>
                    </div> -->
                </template>
            </el-table-column>
        </el-table>

    </div>
</template>

<script lang='ts' setup>
import { reactive, toRefs, ref, onMounted, defineProps } from 'vue'
import { TimeTask } from '../../apis/elderly/type';
import { getElderlyTask } from '../../apis/elderly/elderly';
import { dayjs } from 'element-plus';
import TaskColumn from './TaskColumn.vue';
const props = defineProps<{
    id: number
}>()


const tableData = ref<TimeTask[]>([]);

const diff = (startTime: string, endTime: string) => {
    let date = dayjs().format("YYYY-MM-DD") + " ";
    const start = dayjs(date + startTime);
    const end = dayjs(date + endTime);
    let minute = end.diff(start, 'minute');
    return ((minute / 60) * 100).toFixed(2) + "%";
}

let m = diff("09:00:00", "10:45:00");


const getTop=(time:string)=>{
    let date = dayjs().format("YYYY-MM-DD") + " ";
  let minute=  dayjs(date+time).minute();

  return ((minute / 60) * 100).toFixed(2) + "%";

}

const getData = async () => {

    const res = await getElderlyTask(props.id);
    console.log("res222222222", res.data.list);
    let list = res.data.list.map((item) => ({ ...item,top:getTop(item.startTime),height: diff(item.startTime, item.endTime) }));
    let date = dayjs().format("YYYY-MM-DD");

    for (let i = 0; i < 24; i++) {
        tableData.value.push({
            time: i,
            task: list.filter(item => Number(dayjs(date + " " + item.startTime).format("H")) == i && item.type === '日循环')
        })
    }



}

onMounted(() => {
    getData();
})



</script>
<style scoped lang="less">


:deep .el-table .el-table__cell {
    padding: 0 !important;
    position: static !important;

}

:deep .el-table .cell {
    overflow: visible !important;
}
</style>